<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .box-1 {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 3.75rem;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
        }

        .box-1 p {
            height: .47rem;
            justify-content: space-between;
            align-items: center;

            font-size: .16rem;
            color: rgba(18, 18, 18, 0.9);
        }

        .box-1 p span {
            flex: 1;
            margin-right: .08rem;
            text-align: right;
        }

        .box-1 p em {
            font-size: .14rem;
            flex: 6;
            color: rgba(255, 0, 0, 0.9);
        }

        .box-1 p input {
            color: rgba(18, 18, 18, 0.25);
            font-size: .14rem;
            flex: 6;
        }

        .box-1 .button {
            margin-top: .08rem;
            justify-content: space-between;
            align-items: center;
        }

        .box-1 .button span {
            width: 1.6rem;
            line-height: .32rem;
            display: block;
            text-align: center;
        }

        .box-1 .button .button-1 {
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }

        .box-1 .button .button-2 {
            background: rgba(101, 180, 15, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }

        .box-1 .tip {
            height: auto;
            color: rgba(18, 18, 18, 0.25);
            font-size: .08rem;
            justify-content: space-between;
            align-items: center;
        }

        .box-1 .tip span {
            background: url(../img/起@2x.png) no-repeat left;
            padding-left: .11rem;
            background-size: .09rem .11rem;
            text-align: left;
        }

        .box-1 .tip em {
            flex: none;
            color: rgba(18, 18, 18, 0.25);
            font-size: .12rem;
        }

        .box-2,
        .box-3 {
            width: 100%;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .box-2 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px;
        }

        .box-2 div {
            justify-content: space-between;
            align-items: center;
        }

        .box-2 div input {
            box-sizing: border-box;
            width: 1.4rem;
            line-height: .48rem;
            padding: .12rem;
            border: none;
            background: #fff;
            color: rgba(18, 18, 18, 1);
            font-size: .16rem;
        }

        .box-2 div span {
            text-align: center;
            display: block;
            width: 1.99rem;
            line-height: .48rem;
            background: rgba(18, 18, 18, 0.08);
        }

        .box-2 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }

        .box-2 .button,
        .box-3 .button {
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
            text-align: center;
            line-height: .32rem;
            width: 3.51rem;
            display: block;
            margin: 0 auto;
            background: rgba(95, 49, 4, 1);
            margin-top: .08rem;
        }

        .box-3 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px
        }

        .box-3 div input {
            box-sizing: border-box;
            width: 3.51rem;
            line-height: .48rem;
            background: #fff;
            padding: 0 .12rem;
            color: rgba(18, 18, 18, 1);
        }

        .box-3 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">投诉记录</span>
        <span class="public-header-right">足迹</span>
    </div>

    <!--正文-->
    <div class="buy-info-page bc-gray">
        <img src="../img/配图@2x.png" alt="">
        <img src="../img/配图@2x.png" alt="">
        <section class="s1">
            <p class="t1">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字… </p>
            <p class="t2">
                <span>07.02 16:00</span>
                <em class="e1">包退</em>
                <em class="e2">包邮</em>
                <em class="e3">可鉴定</em>
            </p>
            <p class="t3">
                <span>投诉</span>
                <em class="e3">12</em>
                <em class="e2">12</em>
                <em class="e1">12</em>


            </p>
            <p class="t4"><span>距离结束：</span><em>2小时37分18秒</em></p>
        </section>
        <section class="s2 flex">
            <img src="../img/头像 @3x.png" alt="">
            <div class="right">
                <p><span>名称名称</span><em>VIP2</em><i>已关注</i>
                    <font></font>
                </p>
                <p><span>联系卖家</span><i>1000元</i><em>4.6分</em></p>
            </div>
        </section>
        <!--最新成交-->
        <section class="s5">
            <p class="t1">
                <span class="t1-1">最新成交人</span>
                <span class="t1-2">更多</span>
            </p>
            <ul>
                <li class="flex red">

                    <div class="li-1">
                        <img src="../img/头像 @3x.png" alt="">
                    </div>
                    <div class="li-2">
                        <p class="li-2-1">用户名</p>
                        <p class="li-2-2">￥199</p>
                    </div>
                    <div class="li-3">
                        <br> 17-07-03 10:31:13
                    </div>
                </li>
                <li class="flex gray">

                    <div class="li-1">
                        <img src="../img/头像 @3x.png" alt="">
                    </div>
                    <div class="li-2">
                        <p class="li-2-1">用户名</p>
                        <p class="li-2-2">￥199</p>
                    </div>
                    <div class="li-3">
                        <br> 17-07-03 10:31:13
                    </div>
                </li>
            </ul>
            <em class="arrow-bottom"></em>
        </section>
        <section class="s6">

        </section>
        <section class="s3 flex">
            <div class="a1">
                <font style="background:url(../img/起@2x.png) no-repeat center;background-size:contain;"></font><em>￥</em><i>0</i>
            </div>
            <div class="a2">
                 <font style="background:url(../img/加@2x.png) no-repeat center;background-size:contain;"></font><em>￥</em><i>0</i>
            </div>
            <div class="a3">
                 <font style="background:url(../img/保@2x.png) no-repeat center;background-size:contain;"></font><em>￥</em><i>0</i>
            </div>
            <div class="a4">
                 <font style="background:url(../img/延@2x.png) no-repeat center;background-size:contain;"></font><em>￥</em><i>0</i>
            </div>
            <div class="a5">
                 <font style="background:url(../img/一口价@2x.png) no-repeat center;background-size:contain;width:.26rem;height:.11rem;"></font><em>￥</em><i>0</i>
            </div>

        </section>
        <section class="s4">
            <p class=""><span>店铺产品</span><em>拍卖公告</em></p>
            <div>
                <ul class="clearfix">
                    <li class="">
                        <img src="../img/配图@2x.png" alt="">
                        <p class="t1">产品名字产品名字产品</p>
                        <p class="t2"><span>￥:40.00起</span><em>141</em></p>
                    </li>
                    <li class="">
                        <img src="../img/配图@2x.png" alt="">
                        <p class="t1">产品名字产品名字产品</p>
                        <p class="t2"><span>￥:40.00起</span><em>141</em></p>
                    </li>
                    <li class="">
                        <img src="../img/配图@2x.png" alt="">
                        <p class="t1">产品名字产品名字产品</p>
                        <p class="t2"><span>￥:40.00起</span><em>141</em></p>
                    </li>
                    <li class="">
                        <img src="../img/配图@2x.png" alt="">
                        <p class="t1">产品名字产品名字产品</p>
                        <p class="t2"><span>￥:40.00起</span><em>141</em></p>
                    </li>
                </ul>
            </div>
        </section>
    </div>


    <div class="buy-footer">
        <div class="c1">
            <span>进店逛逛</span>
            <em style="background:rgba(95,49,4,1);color:#fff">立即购买</em>
        </div>
    </div>

    <!-- 
    <div class="box-1">
        <p class="price flex">
            <span>领先价</span>
            <em>1234元</em>
        </p>
        <p class="price-self flex" style="background:#fff;">
            <span>出价</span>
            <input type="text" placeholder="出价不能低于起价">
        </p>
        <div class="button flex">
            <span class="button-1">一口价 ￥1234</span>
            <span class="button-2">确认</span>
        </div>
        <p class="tip flex">
            <span>￥:100</span>
            <em>出价即表示同意《紫陶汇竞拍服务协议》</em>
        </p>
    </div> -->

    <!-- <div class="box-2">
        <p class="t1">
            <span>验证码</span>
            <em>已发送至 131-1313-1313</em>
        </p>
        <div class="flex">
            <input type="text" placeholder="验证码">
            <span>59s</span>
        </div>
        <p class="t2">
            验证号码后才能继续出价
        </p>
        <span class="button">确认</span>
    </div> -->

    <div class="box-3">
        <p class="t1">
            请输入你的电话号码，方便卖家联系
        </p>
        <div class="">
            <input type="text" placeholder="输入手机号码">

        </div>
        <p class="t2">
            验证号码后才能继续出价
        </p>
        <span class="button">确认</span>
    </div>


    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:block;z-index:2;"></div>



</body>

</html>